<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
		<script src="../util/jquery-3.4.1.js"></script>
		<script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<script src="../util/echarts.js"></script>
		<script src="../js/regularExpression.js">
			
		</script>
		<link rel="stylesheet" type="text/css" href="../css/personal.css"/>
		<link rel="stylesheet" type="text/css" href="../font/font-awesome-4.7.0/css/font-awesome.min.css" />
	</head>
	<body>
		<h2 class="h2">个人中心</h2>
		<div class="personal-part">
		 <div id="userImgPart">
			 <ul>
		 	<li> <label for="exampleInputFile"><img src="../images/photo/0.jpg" class="img-responsive headerImg" id="userImg" alt="Responsive image" >  </label><input type="file" id="exampleInputFile"></li>
			 <!-- <li><button class="btn btn-info" type="submit" id="changeImg" data-toggle="modal" data-target="#editUserInfo">更改头像</button></li> -->
		    </ul>
		 </div>
		
		<div id="header">
		  	<div id="userInfo">
             <ul>
                  	<li><h3 class="h3" style="margin-top: 15px; display: inline-block;" id="userName"></h3>
						   <i class="fa fa-mars icon" style="font-size: 24px; line-height: 30px;"></i></li>
					<li><span>部门：</span> <span id="userDep"></span><span>&nbsp;&nbsp;&nbsp;&nbsp;职位：</span> <span id="userPost"></span></li>
					<li><span>生日：</span> <span id="userBirth"></span></li>
					<li><span>个人介绍：</span> <span id="userIntro"></span></li>
                  	</ul>
           </div>
		<div class="headerRight">
			<button class="btn btn-info" type="submit" data-toggle="modal" data-target="#editUserInfo" id="varifyPer">修改资料</button>
		</div>
		</div>
		<div class="mid">
			<hr style="background-color: red;"/>
			<div class="echart1"  id="echart1">chart1</div>
			<div class="echart2"  id="echart2">chart2</div>
			<div class="echart3"  id="echart3">chart3</div>
		</div>
		</div>
		<div class="modal fade" tabindex="-1" role="dialog" id="editUserInfo">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span >&times;</span></button>
						<h4 class="modal-title">编辑信息</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-10">
									<input type="text" class="form-control " name="name" placeholder="请输入姓名(2-6字)">
								</div>
								<span class="col-sm-2"></span>
								<p class="col-sm-10 remind">名字长度在2-6字之间</p>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label " >电话</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="leadingTel" placeholder="请输入正确的手机号码">
								</div>
								<span class="col-sm-2"></span>
								<p class="col-sm-10 Remind">请输入正确的手机号码</p>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label" >生日</label>
								<div class="col-sm-10">
									<div class="btn-group">
									  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="yearButton">
									   <span class="caret"></span>
									  </button>
									  <ul class="dropdown-menu" id="yearList" style="height: 200px; overflow: auto;">
									  </ul>
									</div>
									<div class="btn-group">
									  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="monthButton">
									    1 <span class="caret"></span>
									  </button>
									  <ul class="dropdown-menu" id="monthList" style="height: 200px; overflow: auto;">
									    <li><a href="javascript:;">1</a></li>
									    <li><a href="javascript:;">2</a></li>
									    <li><a href="javascript:;">3</a></li>
										<li><a href="javascript:;">4</a></li>
										<li><a href="javascript:;">5</a></li>
										<li><a href="javascript:;">6</a></li>
										<li><a href="javascript:;">7</a></li>
										<li><a href="javascript:;">8</a></li>
										<li><a href="javascript:;">9</a></li>
										<li><a href="javascript:;">10</a></li>
										<li><a href="javascript:;">11</a></li>
										<li><a href="javascript:;">12</a></li>
									  </ul>
									</div>
									<div class="btn-group">
									  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dayButton">
									    1 <span class="caret"></span>
									  </button>
									  <ul class="dropdown-menu" id="dayList" style="height: 200px; overflow: auto;">
									  </ul>
									</div>
								</div>
								<span class="col-sm-2"></span>
								<p class="col-sm-10 DepartmentRemind"></p>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label"  >个人介绍</label>
								<div class="col-sm-10">
									<input type="text" class="form-control departmentEditInput" name="about" placeholder="请输入个人介绍">
								</div>
								<span class="col-sm-2"></span>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="savePersonal">保存</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>
	
	</body>
	<script type="text/javascript" src="../js/personal.js">
   </script>
</html>
